<template>
    <div class="shop_detail">
        <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in productAlbum" :key="image">
                <van-image fit="cover" width="100%" height="300" :src="image.picture" />
            </van-swipe-item>
        </van-swipe>
        <div v-if="product" class="product_info">
            <h4>{{ product.name }}（{{ product.spec }}）</h4>
            <p class="price">￥{{ product.price }}</p>
            <van-space :size="50" class="product_info_space">
                <span>运费：免运费</span>
                <span>剩余：{{ product.stock }}</span>
            </van-space>
            <van-space direction="vertical" fill>
                <span>发货 &nbsp;江西</span>
                <span>保障 &nbsp; 7天无理由退换</span>
                <span>参数 &nbsp; 品牌：枝纯 &nbsp;价格：100-200</span>
            </van-space>
            <van-divider :style="{ color: '#000', borderColor: '#000' }">
                宝贝详情
            </van-divider>
            <div class="product_info_content" v-html="product.description"></div>
        </div>
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
            <van-action-bar-icon icon="cart-o" :badge="carStore.car.length" :badge-props="{ 'show-zero': false }" to="/car"
                text="购物车" />
            <van-action-bar-button type="warning" @click="addToCart" text="加入购物车" />
            <van-action-bar-button type="danger" @click="buyNow" text="立即购买" />
        </van-action-bar>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getProductDetailService, getProductAlbumService } from "@/apis/product";
import { showToast, showSuccessToast } from "vant";
import { useCarStore } from "@/stores/car";
import { useUserInfoStore } from "@/stores/userInfo";
const route = useRoute();
const router = useRouter();
const carStore = useCarStore();
const userInfoStore = useUserInfoStore();
const onClickLeft = () => {
    history.back();
};
// 获取商品信息
const product = ref(null);
const id = route.params.id;
const getProductDetail = async () => {
    let res = await getProductDetailService({ id: id });
    product.value = res.data;
};

// 获取商品相册
const productAlbum = ref([]);
const getProductAlbum = async () => {
    let res = await getProductAlbumService({ goods_id: id });
    productAlbum.value = res.data;
};

// 加入购物车
const addToCart = () => {
    if (!userInfoStore.userInfo) {
        router.push("/login");
        showToast("请先登录");
        return;
    }
    let value = {
        id: product.value.id,
        count: 1,
    };
    carStore.setCar(value);
    showSuccessToast("已加入购物车");
};
// 立即购买
const buyNow = () => {
    showToast("功能暂未开放");
};
// 页面加载完成后，获取数据
getProductDetail();
getProductAlbum();
</script>
<style scoped>
.van-action-bar {
    z-index: 2;
}

.product_info {
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.product_info_space {
    color: #3f3f3f;
}

.price {
    text-align: center;
    color: #ee0a24;
}

:deep(.product_info_content img) {
    width: 100%;
    height: auto;
}
</style>
